<template>
  <div id="TimeOutwarningList">
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="71px"
      >
        <el-form-item label="区域">
          <el-select
            v-model="formInline.branch_id"
            filterable
            placeholder="请选择运单出发区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in websiteList"
              :key="index"
              :value="item.id + ''"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="超时节点">
          <el-select
            v-model="formInline.node_id"
            placeholder="配送环节"
            style="padding: 0px 8px 0px 0px"
          >
            <el-option label="揽收" value="1"></el-option>
            <el-option label="干线" value="2"></el-option>
            <el-option label="配送" value="3"></el-option>
            <el-option label="签收" value="4"></el-option>
            <el-option label="回单创建" value="5"></el-option>
            <el-option label="回单签收" value="6"></el-option>
            <el-option label="回箱创建" value="7"></el-option>
            <el-option label="回箱签收" value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最终操作时间" label-width="120px">
          <el-date-picker
            v-model="last_time"
            type="daterange"
            :default-time="['00:00:00', '23:59:59']"
            value-format="timestamp"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="thermometermonitorObjTwo()"
            >查询</el-button
          >
          <el-button type="primary" @click="replacement()">重置</el-button>
          <el-button type="primary" @click="exportdatat()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :max-height="maxheight"
      >
        <el-table-column type="index" width="50" label="序号" fixed="left">
        </el-table-column>
        <el-table-column
          prop="branch_id_name"
          label="区域"
          width="180"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          prop="waybill_no"
          label="运单号"
          width="110"
          fixed="left"
        >
          <template slot-scope="scope">
            <div @click="handleClick(scope.row, 'see')" style="color: #409eff">
              {{ scope.row.waybill_no }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customer_id_name" label="客户" width="150">
        </el-table-column>
        <el-table-column prop="node_id" label="超时节点" width="80">
          <template slot-scope="scope">
            {{ scope.row.node_id | nodeObj }}
          </template>
        </el-table-column>
        <el-table-column prop="overtime_reason" label="超时原因" width="180">
        </el-table-column>
        <el-table-column
          prop="waybill_create_time_name"
          label="运单创建时间"
          width="160"
        >
        </el-table-column>
        <el-table-column prop="timeout" label="超时天数" width="80">
        </el-table-column>
        <el-table-column
          prop="last_editor_id_name"
          label="最终操作人"
          width="110"
        >
        </el-table-column>
        <el-table-column
          prop="last_edit_time_name"
          label="最终操作时间"
          width="150"
        >
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'see')"
              type="text"
              size="small"
              >去处理</el-button
            >
            <el-button @click="haveAlready(scope.row)" type="text" size="small"
              >已处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      style="margin: 10px 0px 0px 0px; display: flex; justify-content: flex-end"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ALLtotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  overtimerecordsList,
  branchList,
  overtimerecordsexport,
  overtimerecordsupdate,
} from "@/api/Largewidthmeterlist";
import { getNowFormatDate } from "@/utils/auth";
export default {
  name: "TimeOutwarningList",
  data() {
    return {
      maxheight: "auto",
      websiteList: [],
      formInline: {
        branch_id: "",
        node_id: "",
        last_edit_time: {
          start_time: "", //开始时间
          end_time: "", //结束时间
        },
      },
      last_time: [], //结束时间
      tableData: [],
      ALLtotal: 0,
      currentPage4: 1,
      page: 1,
      page_size: 20,
    };
  },
  mounted() {
    this.getWebsiteList();
    if (this.$route.query) {
      this.formInline.branch_id = this.$route.query.branch_id;
      this.formInline.node_id = this.$route.query.node_id;
      this.thermometermonitorObj();
    } else {
      this.thermometermonitorObj();
    }
  },
  filters: {
    nodeObj(value, params) {
      switch (value) {
        case "1":
          return "揽收";
        case "2":
          return "干线";
        case "3":
          return "配送";
        case "4":
          return "签收";
        case "5":
          return "回单创建";
        case "6":
          return "回单签收";
        case "7":
          return "回箱创建";
        case "8":
          return "回箱签收";
      }
    },
    statusObj(value) {
      switch (value) {
        case "0":
          return "未处理";
        case "1":
          return "已处理";
      }
    },
  },
  methods: {
    async getWebsiteList() {
      let result = await branchList({ branch_type: "3", is_head: "1" });
      this.websiteList = result.data;
    },
    thermometermonitorObjTwo() {
      this.page = 1;
      this.page_size = 20;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    thermometermonitorObj() {
      var newdata = getNowFormatDate();
      // console.log(newdata, "getNowFormatDategetNowFormatDate");
      var param = {
        branch_id: this.formInline.branch_id,
        create_day: newdata,
        node_id: this.formInline.node_id, // 节点id 1揽收 3干线 4配送 5签收 6回单 7回箱
        last_edit_time: {
          start_time:
            this.last_time[0] != undefined ? this.last_time[0] / 1000 + "" : "", //开始时间
          end_time:
            this.last_time[1] != undefined ? this.last_time[1] / 1000 + "" : "", //结束时间
        },
        page: this.page,
        page_size: this.page_size,
      };
      overtimerecordsList(param).then((res) => {
        this.tableData = res.data.data;
        if (this.tableData.length > 6) {
          //一排操作栏
          this.maxheight = document.documentElement.clientHeight - 245;
        } else {
          this.maxheight = "auto";
        }
        this.ALLtotal = res.data.pagination.total;
        this.page = res.data.pagination.page * 1;
        this.page_size = res.data.pagination.page_size * 1;
      });
    },

    handleSizeChange(val) {
      this.page_size = val;
      this.thermometermonitorObj();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.thermometermonitorObj();
      console.log(`当前页: ${val}`);
    },
    replacement() {
      this.last_time = [];
      Object.assign(this.$data.formInline, this.$options.data().formInline);
      this.page = 1;
      this.page_size = 10;
      this.thermometermonitorObj();
      this.currentPage4 = 1;
    },
    exportdatat() {
      var newdata = getNowFormatDate();
      var param = {
        ...this.formInline,
        last_edit_time: {
          start_time:
            this.last_time[0] != undefined ? this.last_time[0] / 1000 + "" : "", //开始时间
          end_time:
            this.last_time[1] != undefined ? this.last_time[1] / 1000 + "" : "", //结束时间
        },
        create_day: newdata,
      };
      overtimerecordsexport(param).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    handleClick(value) {
      let id = value.waybill_id;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id },
      });
      window.open(text.href, "_blank");
    },
    haveAlready(value) {
      // console.log(value);
      var param = {
        id: value.id,
      };
      overtimerecordsupdate(param).then((res) => {
        if (res.code == 10000) {
          this.$message({
            message: "已处理",
            type: "success",
          });
        }
        this.thermometermonitorObj();
      });
    },
  },
};
</script>
<style scoped lang="less">
#TimeOutwarningList {
  /* width: 100%; */
  background: #ffffff;
  padding: 10px 15px;
}
</style>